<template>
  <div>
    <div style="height: 0px">
      <strong style="display: block; margin-top: 10px; text-align: center; font-size: 40px"
        >台风预测</strong
      >
    </div>

    <div class="box">
      <div class="chart">
        <iframe
          :src="typhoonPredictURL"
          width="100%"
          height="100%"
          frameborder="0"
        >
        </iframe>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "typhoonPredict",
  data() {
    return {
      typhoonPredictURL: "http://47.112.166.50:7755/",
    };
  },
  mounted() {
    this.$emit("changeIsSelect2", false);
    this.$emit("changeIsSelect3", false);
    this.$emit("changeIsTimeOperator", false);
  },
  methods: {},
};
</script>

<style scoped lang="scss">
@media screen and (min-width: 700px) {
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .chart {
    border: 3px double #c7e8ff;
    background-color: #fff;
    margin: 60px;
    width: 70%;
    height: 65vh;

    #charts {
      width: 100%;
      height: 65vh;
    }
    img {
      max-width: 100%;
      max-height: 100%;
      display: block;
    }
  }
}
</style>
